<template>
  <el-form
    label-width="96px"
    ref="info_modal_data_ref"
    :model="info_modal.form_data"
    :rules="info_modal.rules"
    v-if="userStore.info_data.auditStatus==1"
  >
    <div class="box">
      <h3>人员个人信息</h3>
      <el-form-item
        label="姓名"
        prop="teacherName"
      >
        <el-input v-model.trim="info_modal.form_data.teacherName" />
      </el-form-item>
      <el-form-item
        label="性别"
        prop="gender"
      >
        <el-radio-group
          v-model="info_modal.form_data.gender"
          class="ml-4"
        >
          <el-radio
            label="0"
            size="large"
          >女</el-radio>
          <el-radio
            label="1"
            size="large"
          >男</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="证件照"
        prop="documentImg"
      >
        <el-text
          type="info"
          size="small"
        >本人近 1 年内正面、免冠、无妆、彩色电子证件照（白色 / 蓝色背景，用于证件照片）</el-text>
        <UploadImage v-model="info_modal.form_data.documentImg" />
      </el-form-item>
      <el-form-item
        label="证件类型"
        prop="documentType"
      >
        <IdTypeSelect v-model="info_modal.form_data.documentType" />
      </el-form-item>
      <el-form-item
        label="证件号码"
        prop="documentNumber"
      >
        <el-input
          v-model="info_modal.form_data.documentNumber"
          placeholder="请输入证件号码"
        />
      </el-form-item>
      <el-form-item
        label="手机号码"
        prop="phone"
      >
        <el-input
          v-model="info_modal.form_data.phone"
          placeholder="请输入手机号码"
        />
      </el-form-item>
    </div>
    <div class="box">
      <h3>所属学校与地区</h3>
      <el-form-item
        label="所属学校"
        prop="schoolName"
      >
        <el-input
          v-model="info_modal.form_data.schoolName"
          placeholder="请输入所属学校"
        />
      </el-form-item>
      <el-form-item
        label="所属市区"
        prop="county"
      >
        <ProvinceSelect
          :isW="true"
          v-model:economize="info_modal.form_data.economize"
          v-model:market="info_modal.form_data.market"
          v-model:county="info_modal.form_data.county"
          :showCounty="true"
        />
      </el-form-item>
    </div>
    <div class="box">
      <el-form-item>
        <el-button
          type="primary"
          size="large"
          @click="handleSubmit"
          color="#1964d6"
          :loading="loading"
        >保存信息</el-button>
      </el-form-item>
    </div>
  </el-form>
  <el-empty
    v-else
    description="审核中或审核未通过，暂不支持使用此功能"
  />
</template>

<script  setup>
import ProvinceSelect from "@/components/province-select/index.vue"
import UploadImage from "@/components/upload-image/index.vue"
import { AddTeacherApi } from "@/api/manage/institution"
import { ref } from "vue";
import { ElMessage } from "element-plus"
import { useUserStore } from "@/store/user";
import IdTypeSelect from "@/components/idtype-select/index.vue"
import { handleCheckDocumentNumber } from "@/utils/index"

const userStore = useUserStore();
const loading = ref(false)

const emit = defineEmits(['sub'])
const info_modal_data_ref = ref()

const checkPhone = (rule, value, callback) => {
  const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/
  if (!value) {
    callback(new Error('手机号码不能为空'))
  }
  if (phoneReg.test(value)) {
    callback()
  } else {
    callback(new Error('手机号码格式错误'))
  }
}

const checkDocumentNumber = (rule, value, callback) => {
  if (!value) {
    callback(new Error('证件号不能为空'))
    return;
  }
  if (!info_modal.value.form_data.documentType) {
    callback(new Error('请选择证件类型'))
    return;
  }
  if (!handleCheckDocumentNumber(info_modal.value.form_data.documentType, value)) {
    callback(new Error('证件号格式错误'))
    return;
  }
  callback()

}

/**
 * 信息弹窗数据
 */
const info_modal = ref({
  form_data: {
    gender: "1"
  },
  rules: {
    teacherName: [
      {
        required: true,
        message: '请请输入姓名',
        trigger: 'blur',
      }
    ],
    gender: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'blur',
      }
    ],
    documentImg: [
      {
        required: true,
        message: '请上传证件照',
        trigger: 'blur',
      }
    ],
    documentType: [
      {
        required: true,
        message: '请选择证件类型',
        trigger: 'blur',
      }
    ],
    documentNumber: [
      {
        required: true,
        validator: checkDocumentNumber,
        trigger: 'blur',
      }
    ],
    phone: [
      {
        required: true,
        validator: checkPhone,
        trigger: 'blur'
      }
    ],
    schoolName: [
      {
        required: true,
        message: '请输入所属学校',
        trigger: 'blur',
      }
    ],
    county: [
      {
        required: true,
        message: '请选择所属市区',
        trigger: 'blur',
      }
    ],
  }
})

const handleRest = () => {
  info_modal.value.form_data = {
    "teacherName": "",
    "gender": "1",
    "documentImg": "",
    "documentType": "",
    "documentNumber": "",
    "phone": "",
    "schoolName": "",
    "economize": 0,
    "market": 0,
    "county": 0,
  }
}
/**
 * 获取学生信息
 */
const handleGetInfo = async (row) => {

  info_modal.value.form_data = row;
  return;
  let res = await GetStudentInfoApi({
    teacherId: row.teacherId
  })
  if (res.success) {
    info_modal.value.form_data = res.entity;
  }

}


/**
 * 保存信息
 */
const handleSubmit = async () => {
  info_modal_data_ref.value.validate(async (r) => {
    if (!r) {
      return;
    }
    loading.value = true;

    let res;
    res = await AddTeacherApi(info_modal.value.form_data);
    if (res.success) {
      ElMessage.success(res.message);
      emit('sub', res)
    } else {
      ElMessage.error(res.message)
    }
    loading.value = false;

  });
}

defineExpose({
  handleGetInfo,
  handleRest
})
</script>

<style lang="scss" scoped>
.box {
  padding-bottom: 32px;
  padding-left: 32px;
  width: 640px;
  h3 {
    margin-bottom: 16px;
  }
}
</style>